<template>
  <div class="stats-container">
    <h2>数据统计概览</h2>
    
    <div v-if="loading" class="loading-indicator">
      <el-icon><Loading /></el-icon>
      正在加载统计数据...
    </div>
    
    <div v-else>
      <!-- 总览卡片 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-number">{{ stats.total_pairs.toLocaleString() }}</div>
              <div class="stat-label">句子对总数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-number">{{ stats.language_count }}</div>
              <div class="stat-label">支持语言数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-number">{{ stats.source_count }}</div>
              <div class="stat-label">数据源数</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 语言分布 -->
      <el-card class="stats-section" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>语言分布统计</span>
          </div>
        </template>
        <el-table :data="stats.language_distribution" style="width: 100%" border stripe>
          <el-table-column prop="code" label="语言代码" width="120"></el-table-column>
          <el-table-column prop="name" label="语言名称" width="150"></el-table-column>
          <el-table-column prop="count" label="数量" width="120">
            <template #default="scope">
              {{ scope.row.count.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="percentage" label="占比" width="120">
            <template #default="scope">
              {{ scope.row.percentage }}%
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="分布">
            <template #default="scope">
              <el-progress 
                :percentage="scope.row.percentage" 
                :stroke-width="10" 
                :color="getProgressColor(scope.row.percentage)"
              ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 数据源分布 -->
      <el-card class="stats-section" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>数据源分布</span>
          </div>
        </template>
        <el-table :data="stats.source_distribution" style="width: 100%" border stripe>
          <el-table-column prop="source" label="数据源" width="200"></el-table-column>
          <el-table-column prop="count" label="数量">
            <template #default="scope">
              {{ scope.row.count.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="percentage" label="占比">
            <template #default="scope">
              {{ scope.row.percentage }}%
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <el-alert 
      v-if="error" 
      :title="error" 
      type="error" 
      show-icon 
      closable
      @close="error = ''"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import api from '@/api'

const loading = ref(true)
const error = ref('')
const stats = ref({
  total_pairs: 0,
  language_count: 0,
  source_count: 0,
  language_distribution: [],
  source_distribution: []
})

// 获取统计数据
const fetchStats = async () => {
  try {
    const response = await api.get('/stats')
    stats.value = response.data
    loading.value = false
  } catch (err) {
    console.error('获取统计数据失败:', err)
    error.value = '获取统计数据失败，请稍后重试'
    loading.value = false
  }
}

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage >= 50) return '#67c23a'
  if (percentage >= 30) return '#e6a23c'
  if (percentage >= 10) return '#f56c6c'
  return '#909399'
}

// 页面加载时获取统计数据
onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-size: 16px;
  color: #606266;
}

.loading-indicator .el-icon {
  margin-right: 8px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  color: #606266;
}

.stats-section {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
}

:deep(.el-progress-bar__outer) {
  height: 10px;
  border-radius: 5px;
}

:deep(.el-progress-bar__inner) {
  border-radius: 5px;
}
</style>